<template>
  <div class="box">
    <el-container>
      <el-header>
        <conTopNav></conTopNav>
      </el-header>
      <el-container class="content-container"
        ><el-aside width="208px" v-if="sidebarShow" height="100%">
          <comSilder v-if="isAdminPage"></comSilder>
          <comManageSidebar v-else></comManageSidebar>
        </el-aside>
        <el-main>
          <router-view v-slot="{Component}">
            <component :is="Component" />
          </router-view> </el-main
      ></el-container>
    </el-container>
  </div>
</template>
<script setup lang="ts">
import {ref, watchEffect} from 'vue';
import router, {SidebarType} from '@/router';
import conTopNav from '@/components/comTopNav/index.vue';
import comSilder from '@/components/comSilder/index.vue';
import comManageSidebar from '@/components/comManageSidebar/comManageSidebar.vue';

const isAdminPage = ref(false); // 管理员sidebar
const sidebarShow = ref(false);
watchEffect(() => {
  const sidebarType = router.currentRoute.value.meta.sidebar;
  isAdminPage.value = sidebarType === SidebarType.admin;
  sidebarShow.value = !!sidebarType;
});
</script>
<style lang="scss">
$navHeight: 78px;
.box {
  position: relative;
  height: 100%;
  overflow: auto;
  background-color: #fff;
}
.el-container {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}
.content-container {
  height: calc(100% - $navHeight);
}
.el-header {
  padding: 0;
  height: 78px !important;
}
.el-main {
  padding: 0;
  margin: 0;
  background-color: #f1f1f1;
}
</style>
